<template>
    <view class="pay-result-container">
        <!-- 支付详情卡片 -->
        <view class="payment-details">
            <view class="payment-title">正在缴纳 [个人会员会费]</view>
            <view class="payment-org">执行与收款机构: 枣庄市红十字会</view>
        </view>

        <!-- 支付结果卡片 -->
        <view class="result-card" :class="{ 'success': isSuccess, 'fail': !isSuccess }">
            <!-- 结果图标 -->
            <view class="result-icon-wrapper">
                <image 
                    :src="isSuccess ? '../../static/success.png' : '../../static/close.png'" 
                    mode="widthFix" 
                    class="result-icon"
                ></image>
            </view>
            
            <!-- 结果消息 -->
            <view class="result-message">{{ resultMessage }}</view>
            
            <!-- 金额显示 -->
            <view v-if="amount !== undefined" class="amount-display">
                {{ isTeenager ? '注册费用：免费' : `支付金额：¥${amount}` }}
            </view>
            
            <!-- 感谢信息 -->
            <view v-if="isSuccess" class="thank-message">感谢您对红十字会事业做出的贡献</view>
            
            <!-- 错误信息 -->
            <view v-if="!isSuccess" class="error-message">{{ errorMessage }}</view>
            
            <!-- 操作按钮 -->
            <view class="action-buttons">
                <view v-if="isSuccess" class="primary-btn" @click="handleReturnToMember">
                    返回会员
                </view>
                <view v-else class="primary-btn" @click="handleRetryPayment">
                    重新支付
                </view>
                <view class="secondary-btn" @click="handleBackToHome">
                    返回首页
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const isSuccess = ref(true)
const resultMessage = ref('缴纳成功')
const errorMessage = ref('支付失败，请重试')
const amount = ref('')
const isTeenager = ref(false)

// 获取页面参数
const getPageParams = () => {
    const pages = getCurrentPages()
    const currentPage = pages[pages.length - 1]
    const options = currentPage.options || {}
    
    return {
        status: options.status || 'success',
        amount: options.amount || '',
        teenager: options.teenager === 'true'
    }
}

// 返回会员页面
const handleReturnToMember = () => {
    uni.switchTab({
        url: '/pages/my/index'
    })
}

// 重新支付
const handleRetryPayment = () => {
    uni.navigateBack({
        delta: 1
    })
}

// 返回首页
const handleBackToHome = () => {
    uni.switchTab({
        url: '/pages/index/index'
    })
}

onMounted(() => {
    // 获取页面参数
    const params = getPageParams()
    
    // 设置页面状态
    isSuccess.value = params.status === 'success'
    amount.value = params.amount
    isTeenager.value = params.teenager
    
    if (isSuccess.value) {
        if (isTeenager.value) {
            resultMessage.value = '注册成功'
        } else {
            resultMessage.value = '缴纳成功'
        }
    } else {
        if (isTeenager.value) {
            resultMessage.value = '注册失败'
            errorMessage.value = '注册过程中出现异常，请重新尝试'
        } else {
            resultMessage.value = '支付失败'
            errorMessage.value = '支付过程中出现异常，请重新尝试'
        }
    }
    
    console.log('支付结果页面加载完成', params)
})
</script>

<style lang="scss" scoped>
.pay-result-container {
    min-height: 100vh;
    background: #F6F6F6;
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    gap: 24rpx;

    .payment-details {
        background: #FFFFFF;
        border-radius: 16rpx;
        padding: 32rpx 24rpx;
        border: 2rpx solid #E7E8EB;

        .payment-title {
            font-size: 32rpx;
            color: #000000;
            line-height: 44rpx;
            font-weight: 500;
            margin-bottom: 8rpx;
        }

        .payment-org {
            font-size: 28rpx;
            color: rgba(0, 0, 0, 0.80);
            line-height: 40rpx;
        }
    }

    .result-card {
        background: #FFFFFF;
        border-radius: 16rpx;
        padding: 152rpx 24rpx;
        border: 2rpx solid #E7E8EB;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;

        &.success {
            .result-icon {
                filter: none;
            }
        }

        &.fail {
            .result-icon {
                filter: grayscale(1);
            }
        }

        .result-icon-wrapper {
            margin-bottom: 32rpx;

            .result-icon {
                width: 148rpx;
                height: 148rpx;
            }
        }

        .result-message {
            font-size: 36rpx;
            color: #000000;
            font-weight: bold;
            line-height: 48rpx;
            margin-bottom: 16rpx;
        }

        .amount-display {
            font-size: 32rpx;
            color: #F9623E;
            font-weight: 600;
            margin-bottom: 16rpx;
        }

        .thank-message {
            font-size: 28rpx;
            color: rgba(0, 0, 0, 0.80);
            line-height: 40rpx;
            margin-bottom: 48rpx;
        }

        .error-message {
            font-size: 28rpx;
            color: #999;
            line-height: 40rpx;
            margin-bottom: 48rpx;
        }

        .action-buttons {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 24rpx;

            .primary-btn {
                width: 100%;
                height: 88rpx;
                background: #F9623E;
                color: #FFFFFF;
                border-radius: 44rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32rpx;
                font-weight: 600;
                transition: all 0.3s ease;

                &:active {
                    transform: scale(0.98);
                }
            }

            .secondary-btn {
                width: 100%;
                height: 88rpx;
                background: #fff;
                color: #666;
                border: 2rpx solid #E7E8EB;
                border-radius: 44rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32rpx;
                font-weight: 600;
                transition: all 0.3s ease;

                &:active {
                    transform: scale(0.98);
                }
            }
        }
    }
}
</style>
